feat(theme): Add fontFamily property to BulletStyle#2811
Merged
awahab07 merged 9 commits intoApr 3, 2026
Merged
Conversation
…ries always get the font.
Collaborator
Author
|
buildkite update vrt |
awahab07
changed the title
fontFamily property to BulletStyle.fontFamily property to BulletStyle
markov00
approved these changes
Apr 3, 2026
8 tasks
nickofthyme
pushed a commit
that referenced
this pull request
Apr 14, 2026
# [71.5.0](v71.4.1...v71.5.0) (2026-04-14) ### Bug Fixes * guard process.env for browser environments without bundler polyfills ([#2810](#2810)) ([9ffd74e](9ffd74e)) * remove `produce()` from selectors ([#2813](#2813)) ([561162c](561162c)) ### Features * **theme:** Add `fontFamily` property to `BulletStyle` ([#2811](#2811)) ([a23b25c](a23b25c)) * **theme:** Add `fontFamily` property to `MetricStyle` ([#2816](#2816)) ([5bcaf24](5bcaf24))
awahab07
added a commit
to elastic/kibana
that referenced
this pull request
Apr 15, 2026
Upgrades the `@elastic/charts` to version `71.5.0` (from `71.4.0`). [`71.5.0`](https://github.com/elastic/elastic-charts/releases/tag/v71.5.0) includes the following two necessary theme updates which Lens needs to accurately render monospaced font for Metric and Gauge charts. - elastic/elastic-charts#2811 - elastic/elastic-charts#2816 |Before v71.4.0|After v71.5.0| |:--:|:--:| |<img width="642" height="614" alt="image" src="https://github.com/user-attachments/assets/3df7090d-35bd-4921-9027-35f7db1e9bca" />|<img width="641" height="622" alt="image" src="https://github.com/user-attachments/assets/48010014-c76d-4301-b133-86d192f4161e" />|
awahab07
added a commit
to awahab07/kibana
that referenced
this pull request
Apr 17, 2026
Upgrades the `@elastic/charts` to version `71.5.0` (from `71.4.0`). [`71.5.0`](https://github.com/elastic/elastic-charts/releases/tag/v71.5.0) includes the following two necessary theme updates which Lens needs to accurately render monospaced font for Metric and Gauge charts. - elastic/elastic-charts#2811 - elastic/elastic-charts#2816 |Before v71.4.0|After v71.5.0| |:--:|:--:| |<img width="642" height="614" alt="image" src="https://github.com/user-attachments/assets/3df7090d-35bd-4921-9027-35f7db1e9bca" />|<img width="641" height="622" alt="image" src="https://github.com/user-attachments/assets/48010014-c76d-4301-b133-86d192f4161e" />| (cherry picked from commit b1617e3) # Conflicts: # src/platform/packages/private/kbn-ui-shared-deps-npm/version_dependencies.txt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds
fontFamilyproperty toBulletStyleso that consumers can override fonts for Bullet Graph charts. The requirement emerged when Lens in Kibana started introducing the monospaced font"Elastic UI Numeric"for all charts in Lens. All charts, except Gauge chart, inherited the monospaced font (see). Gauge chart didn't inherit because it doesn't read and apply the fontFamily from theme config.The stories
demonstrate the bullet graphs adopting the monospaced font
"Elastic UI Numeric":Details
The font face for
"Elastic UI Numeric"is defined in Storybook the same way as in Kibana, by bundling.woff2file along with License and defining the font face.Plus a new story Test Cases -> Font Measurement Test, demonstrates that font measurements and responsiveness work with the monospaced
"Elastic UI Numeric"font.Issues
Follows up: elastic/kibana#249382
Closes #2812
Checklist
:xy,:partition):interactions,:axis)closes #123,fixes #123)packages/charts/src/index.tslightanddarkthemes